<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件详情 - 调度中心</title>
    <link href="/ercms/lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="/ercms/lib/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
    <script src="/ercms/js/auth.js"></script>
    <style>
        .header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 30px 0;
            margin-bottom: 30px;
        }
        .card {
            border-radius: 15px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.08);
        }
        .section-title {
            border-left: 4px solid #764ba2;
            padding-left: 10px;
            margin-bottom: 15px;
        }
        .progress-history {
            max-height: 200px;
            overflow-y: auto;
        }
        .badge-status {
            font-size: 1em;
        }
    </style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container">
        <a th:href="@{/dashboard}" class="navbar-brand">
            <img th:src="@{/images/ing1.png}" alt="ERCMS Logo" style="height:40px;margin-right:10px;"> 应急响应中心管理系统
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav me-auto">
                <li class="nav-item"><a th:href="@{/dashboard}" class="nav-link">首页</a></li>
                <li class="nav-item"><a th:href="@{/dispatch}" class="nav-link">调度中心</a></li>
                <li class="nav-item"><a th:href="@{/events}" class="nav-link">事件管理</a></li>
                <li class="nav-item"><a th:href="@{/resource}" class="nav-link">资源调度</a></li>
            </ul>
            <ul class="navbar-nav">
                <li class="nav-item">
                    <span class="navbar-text me-3"><i class="bi bi-person-circle"></i> <span id="userRealName">调度员</span></span>
                </li>
                <li class="nav-item"><a th:href="@{/logout}" class="nav-link"><i class="bi bi-box-arrow-right"></i> 退出</a></li>
            </ul>
        </div>
    </div>
</nav>
<div class="header">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-md-8">
                <h1 class="mb-2"><i class="bi bi-flag"></i> 事件详情</h1>
                <p class="mb-0">事件编号：<span id="eventId"></span></p>
            </div>
            <div class="col-md-4 text-end">
                <a th:href="@{/dispatch}" class="btn btn-outline-light"><i class="bi bi-arrow-left"></i> 返回调度中心</a>
            </div>
        </div>
    </div>
</div>
<div class="container mb-4">
    <div class="row">
        <div class="col-lg-8 mb-3">
            <div class="card mb-3">
                <div class="card-header bg-primary text-white">
                    <span class="section-title"><i class="bi bi-info-circle"></i> 事件信息</span>
                </div>
                <div class="card-body">
                    <dl class="row mb-0">
                        <dt class="col-sm-3">标题</dt>
                        <dd class="col-sm-9" id="eventTitle"></dd>
                        <dt class="col-sm-3">类型</dt>
                        <dd class="col-sm-9" id="eventType"></dd>
                        <dt class="col-sm-3">描述</dt>
                        <dd class="col-sm-9" id="eventDescription"></dd>
                        <dt class="col-sm-3">地点</dt>
                        <dd class="col-sm-9" id="eventLocation"></dd>
                        <div class="col-12 my-3">
                            <div id="eventMap" style="width:100%;height:320px;border-radius:10px;"></div>
                        </div>
                        <dt class="col-sm-3">优先级</dt>
                        <dd class="col-sm-9" id="eventPriority"></dd>
                        <dt class="col-sm-3">严重程度</dt>
                        <dd class="col-sm-9" id="eventSeverity"></dd>
                        <dt class="col-sm-3">状态</dt>
                        <dd class="col-sm-9"><span id="eventStatus" class="badge badge-status bg-secondary"></span></dd>
                        <dt class="col-sm-3">安全状态</dt>
                        <dd class="col-sm-9"><span id="eventSafetyStatus" class="badge badge-status"></span></dd>
                        <dt class="col-sm-3">支援请求</dt>
                        <dd class="col-sm-9"><span id="eventSupportRequest" class="badge badge-status"></span></dd>
                        <dt class="col-sm-3">上报人</dt>
                        <dd class="col-sm-9" id="eventReporter"></dd>
                        <dt class="col-sm-3">上报时间</dt>
                        <dd class="col-sm-9" id="eventTime"></dd>
                    </dl>
                </div>
            </div>

            <!-- 已指派单位列表 -->
            <div class="card mb-3" id="assignedUnitsCard">
                <div class="card-header bg-info text-white">
                    <h5 class="mb-0"><i class="bi bi-truck"></i> 已指派单位</h5>
                </div>
                <div class="card-body">
                    <ul class="list-group" id="assignedUnitsList"></ul>
                </div>
            </div>

            <!-- 指派处理人和新单位（合并） -->
            <div class="card mb-3" id="assignHandlerAndResourceCard">
                <div class="card-header bg-warning text-dark">
                    <h5 class="mb-0"><i class="bi bi-person-check"></i> 指派处理人和单位</h5>
                </div>
                <div class="card-body">
                    <form id="assignHandlerAndResourceForm" class="row g-2 align-items-center">
                        <div class="col-md-6 mb-2">
                            <label class="form-label">选择处理人：</label>
                            <select class="form-select" id="handlerSelect" required>
                                <option value="">请选择处理人</option>
                                <!-- JS填充 -->
                            </select>
                        </div>
                        <div class="col-md-6 mb-2">
                            <label class="form-label">选择可用单位：</label>
                            <select class="form-select" id="resourceSelect" required>
                                <option value="">请选择单位</option>
                                <!-- JS填充 -->
                            </select>
                        </div>
                        <div class="col-12 text-end">
                            <button type="submit" class="btn btn-warning"><i class="bi bi-check-circle"></i> 一键指派</button>
                        </div>
                    </form>
                </div>
            </div>

            <!-- 事件进度 -->
            <div class="card">
                <div class="card-header bg-success text-white">
                    <span class="section-title"><i class="bi bi-clipboard-check"></i> 处理进度</span>
                </div>
                <div class="card-body">
                    <form id="progressForm" class="mb-3">
                        <div class="mb-2">
                            <label for="progressInput" class="form-label">进度描述</label>
                            <textarea class="form-control" id="progressInput" rows="2" required></textarea>
                        </div>
                        <div class="mb-2">
                            <label for="statusInput" class="form-label">更新状态</label>
                            <select class="form-select" id="statusInput">
                                <option value="">不变</option>
                                <option value="ASSIGNED">已指派</option>
                                <option value="IN_PROGRESS">处理中</option>
                                <option value="RESOLVED">已解决</option>
                                <option value="CLOSED">已关闭</option>
                            </select>
                        </div>
                        <div class="text-end">
                            <button type="submit" class="btn btn-success"><i class="bi bi-upload"></i> 更新进度</button>
                        </div>
                    </form>
                    <div class="progress-history border rounded p-2 bg-light">
                        <div id="progressHistoryList">暂无进度记录</div>
                    </div>
                </div>
            </div>
            
            <!-- 资源调配历史记录 -->
            <div class="card mt-3">
                <div class="card-header bg-info text-white">
                    <span class="section-title"><i class="bi bi-truck"></i> 资源调配历史</span>
                </div>
                <div class="card-body">
                    <div id="resourceHistoryList">暂无调配记录</div>
                </div>
            </div>
        </div>
        <div class="col-lg-4 mb-3">
            <div class="card">
                <div class="card-header bg-secondary text-white">
                    <span class="section-title"><i class="bi bi-clock-history"></i> 事件时间线</span>
                </div>
                <div class="card-body">
                    <ul class="list-group" id="timelineList">
                        <!-- 时间线内容 -->
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="/ercms/lib/bootstrap/js/bootstrap.bundle.min.js"></script>

<!-- 高德地图API（如有本地包可替换，否则用CDN）-->
<script>
window._AMapSecurityConfig = { securityJsCode: 'bd7cfe5378f27ad4720f0279a1b184a7' };
</script>
<script src="https://webapi.amap.com/maps?v=2.0&key=9c44b0918d292a11356bd716509f09c3"></script>
<script src="/ercms/js/dispatch-event-detail.js"></script>
<script src="/ercms/js/permission.js"></script>
</body>
</html> 
